<template>
	<view class="d-flex j-center" style="width: 750upx;">
		<view class="px-2" style="width: 710upx; border-radius: 30upx; background-color: #fff; margin-top: 10upx; padding-bottom: 10upx;">
			<view class="title d-flex" v-if="showHeader">
				<text class="py-1" style="font-size: 30upx; font-weight: bold; padding-right: 20upx; line-height: 2;" :style="titleStyle"
				 @tap="tapEvent($event, 'title')">{{ title }}</text>

				<view class="d-flex j-end a-end" :style="subTitleStyle" @tap="tapEvent($event, 'sub-title')">
					<slot name="sub-title" />
				</view>

				<view class="flex-1 d-flex j-end" style="font-size: 24upx;" :style="rightRegionStyle" @tap="tapEvent($event, 'right-region')">
					<slot name="right-region"></slot>
				</view>
			</view>
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			showHeader: {
				type: Boolean,
				default: true,
			},
			title: {
				type: String,
				default: ''
			},
			titleStyle: {
				type: String
			},
			subTitleStyle: {
				type: String
			},
			rightRegionStyle: {
				type: String
			},
		},
		methods: {
			tapEvent(e, type) {
				this.$emit('tap-event', e, type)
			}
		}
	}
</script>

<style>
</style>
